<template>
  <div class="chart-node" :class="[elementType]" @click.right="right">
    <el-tooltip class="item" effect="dark" :content="id" placement="top-start">
      <div style="display: flex;">
        <div class="node-icon">
          <svg fill="#1e9fff" t="1666347769730" class="icon node-icon-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14559" width="25" height="25"><path d="M381.468365 806.062387 381.468365 650.676409l543.881899 0 0 155.387L381.468365 806.063409zM381.468365 417.595904l543.881899 0 0 155.387L381.468365 572.982904 381.468365 417.59591zM381.468365 184.509235l543.881899 0L925.350264 339.901387 381.468365 339.901387 381.468365 184.509271zM148.376269 650.676429l155.393366 0 0 155.387L148.376268 806.063428 148.376268 650.676409zM148.376269 417.595904l155.393366 0 0 155.387L148.376268 572.982904 148.376268 417.59591zM148.376269 184.509235l155.393366 0L303.769635 339.901387 148.376268 339.901387 148.376268 184.509271z" p-id="14560" /></svg>
        </div>
        <div>
          <div class="db-name">{{ id.split('.')[0] }}</div>
            <div class="table-name">{{ id.split('.')[1] }}</div>
        </div>
      </div>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  name: "NodeElement",
  inject: ['getGraph', 'getNode'],
  data() {
    return {
      showMenu: false,
      id: '',
      levelType: 0 // 0:根节点 1:上游 2:下游
    }
  },
  computed: {
    elementType() {
      if (this.levelType === 1) return 'parent'
      if (this.levelType === 2) return 'children'
      if (this.levelType === 0) return 'root'
      return 'children'
    }
  },
  mounted() {
    const node = this.getNode()
    this.id = node.id
    this.levelType = node.data.levelType
  },
  methods: {
    right(e) {
      const node = this.getNode()
      this.$emit('right', { el: e, node: node })
    }
  }
}
</script>

<style scoped>
.root{
  border: 1px solid #ff4d4f;
}
.parent{
  border: 1px solid #e6a23c;

}
.children{
  border: 1px solid #1e9fff;
}
.root .node-icon{
  color: #f56c6c;
  background: #fef0f0;
}
.root .node-icon-svg{
  fill: #f56c6c;
}

.parent .node-icon{
  background: #fdf6ec;
  color: #e6a23c;
}
.parent .node-icon-svg{
  fill: #e6a23c;
}

.children .node-icon{
  color: #1e9fff;
  background: #E4EDFD;
}
.children .node-icon-svg{
  fill: #1e9fff;
}
.node-icon{
  height: 42px;
  min-width: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chart-node{
  background: #fff;
  width: 200px;
  height: 42px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 12px;
  box-shadow:  0 2px 11px 0 rgb(190 202 218 / 90%);
  overflow: hidden;
}
.db-name{
  padding: 2px 4px;
  font-size: 12px;
  font-weight: bold;
  background: #efefef;
}
.table-name{
  padding: 0 4px;
  overflow: hidden;
  color: #666;
  font-size: 12px;
  width: 166px;
  line-height: 21px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.x6-node-selected .root{
  border-radius: 2px;
  box-shadow: 0 0 0 4px #f3d2d2;
}

.x6-node-selected .parent{
  border-radius: 2px;
  box-shadow: 0 0 0 4px #f6e7d1;
}

.x6-node-selected .children{
  border-radius: 2px;
  box-shadow: 0 0 0 4px #ccdff4;
}

</style>
